<template>
	<view>
		<view v-if="info==null">
			<zero-loading type="triangle"></zero-loading>
		</view>
		<view v-if="info!=null">
		<view class="top_nav_box">
			<navigation-custom :config="config" @customConduct="customConduct" />
		</view>
		<view class="page_item_bj"></view>
		<view class="page_content_box">
			<view :style="{height:statusHeight+'px'}"></view>
			<!-- <view class="auth_step_img">
				<image src="https://www.cccshansong.com/chong_weapp/appeal_icon2.png" mode=""></image>
			</view> -->
			<view class="appeal_detail_tip_box">
				<view class="appeal_detail_tip_title" v-if="info.status==0">处理中</view>
				<view class="appeal_detail_tip_title" v-if="info.status==1">申诉已通过</view>
				<view class="appeal_detail_tip_title" v-if="info.status==2">申诉已拒绝</view>
				<view class="appeal_detail_tip_desc" v-if="info.status==2">
					拒绝原因：{{info.refuse?info.refuse:'--'}}
					<view>
						若对平台处理结果有疑问，可联系平台人工客服
					</view>
				</view>
			</view>
			<view class="auth_step_info_box" style="margin-top: 26rpx;">
				<view class="auth_step_info_title"><text>申诉原因</text></view>
				<view class="phone_login_input_box">
					<view class="phone_login_input_name">申诉原因 <text>*</text></view>
					<view class="pick_box">
						<view class="pick_input">{{info.recource}}</view>
					</view>
				</view>
				<view class="ask_text_box">
					<view class="ask_textarea">
						<textarea v-model="ask_desc" placeholder="请填写问题描述以便我们提供更好的帮助" :disabled="isDisabled"  maxlength="300" ></textarea>
					</view>
				</view>
				<view class="ask_img_box" v-if="info.image!=''">
					<view class="ask_title">问题截图</view>
					<view class="img_list">
						<view class="img_list_item" v-for="(data,index) in info.image_arr" @click="handlePreview(index)">
							<image :src="data" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="appeal_order_box" hover-class="hover_class" v-if="info.order" @click="goOrder()">
				<view class="appeal_order_title">关联订单</view>
				<view class="bond_content_item_order_box">
					<view class="bond_content_item_order_img">
						<image src="https://www.cccshansong.com/chong_weapp/drawer_icon3.png" mode=""></image>
					</view>
					<view class="bond_content_item_order_qu">
						<view class="bond_content_item_order_qu_dian"></view>
						<view class="bond_content_item_order_qu_text">{{info.order.sender_address}}</view>
					</view>
					<view class="bond_content_item_order_song">
						<view class="bond_content_item_order_song_dian"></view>
						<view class="bond_content_item_order_song_text">{{info.order.receiver_address}}</view>
					</view>
				</view>
			</view>
			<view class="appeal_time_box">
				<view class="appeal_time_box_item">
					<view class="appeal_time_box_item_left">提交时间</view>
					<view class="appeal_time_box_item_right">{{info.created_at}}</view>
				</view>
				<view class="appeal_time_box_item">
					<view class="appeal_time_box_item_left">处理时间</view>
					<view class="appeal_time_box_item_right">{{info.audit_at?info.audit_at:'--'}}</view>
				</view>
			</view>
			<view style="height:250rpx;"></view>
		</view>
		<view class="record_fix_box">
			<view class="record_fix_btn1" hover-class="hover_class" @click="handleShowKf()">联系客服</view>
			<view class="record_fix_btn" hover-class="hover_class" v-if="info.status==0" @click="handleRevoke()">撤销申诉</view>
		</view>
		<wyb-popup ref="kfPopup" type="center" height="364" width='640' radius="16" :zIndex='999999'  :showCloseIcon="false" >
			<view class="kfPopup_content">
				<view class="kf_btn_title">提示</view>
				<view class="kf_btn_title1">请任意选择一种方式联系客服</view>
				<view class="kf_btn_box">
					<view class="kf_btn1" @click="handleKfCall()">拨打电话</view>
					<view class="kf_btn2" @click="handleKfWx()">微信客服</view>
				</view>
			</view>
		</wyb-popup>
		<yk-authpup ref="authpup" :isNativeHead='false' type="top" @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>
		<yk-authpup ref="authpupPhoneKf" :isNativeHead='false' type="top" @changeAuth="changeAuthPhoneKf" :permissionID="permissionID"></yk-authpup>
	</view>
	</view>
</template>

<script>
	import ykAuthpup from "@/components/yk-authpup/yk-authpup";
	import zeroLoading from "@/components/zero-loading/components/zero-loading/zero-loading.vue"
	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
	import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom.vue"
	export default {
		components: {
			navigationCustom,
			htzImageUpload,
			ykAuthpup,
			zeroLoading
		},
		data() {
			return {
				permissionID:'',
				kf_phone:'',
				id:0,
				info:null,
				isDisabled:true,
				reason_array: ['原因一', '原因二', '原因三', '原因四'],
				reason_index: -1,
				ask_desc:'',
				ask_desc_num:0,
				action_url:'',
				image_arr:[],
				ceshiData:['https://www.cccshansong.com/chong_weapp/auth_bottom.png','https://www.cccshansong.com/chong_weapp/auth_bottom.png'],
				statusHeight:0,
				config: {
					title: "申诉详情", //title
					bgcolor: "transparent", //背景颜色
					fontcolor: "#fff", //文字颜色，默认白色
					type: 4, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: false, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					menuIcon: "../../static/icon/back2.png", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", //当type为3或4的时候icon右边的文字
				},
			};
		},
		onLoad(e) {
			var a = this
			a.action_url = a.globalurl + 'upload/imageUpload'

			a.statusHeight = uni.getSystemInfoSync().statusBarHeight  + 48
			a.action_url = a.globalurl + 'upload/imageUpload'
			a.id = e.id
			a.getDetail()
			a.getConfig()
		},
		onPageScroll(res) {
			var a = this
			if (0 < res.scrollTop <= 440) {
				a.config.bgcolor = 'rgba(65, 138, 255,0)'
			}
		},
		methods: {
			handlePreview(index){
				uni.previewImage({
				    current: index, // 当前显示图片索引
				    urls: this.info.image_arr // 需要预览的图片http链接列表
				});
			},
			getConfig(){
				var a =this
				a.globalajax('common/getConfig',{
					value:'mobile'
					},'GET',function(res) {
						console.log(res);
						uni.hideLoading()
						uni.stopPullDownRefresh()
						if(res.data.code==200){
							a.kf_phone = res.data.data
						}else{
							a.$showModal({
								title:'友情提示',
								content:res.data.msg,
								showCancel:false,
								confirmText:'我知道了',
								success: (res) => {
								}
							});
						}
					}
				);
			},
			handleKfWx(){
				var a = this
				a.$refs.kfPopup.hide();
				plus.share.getServices(res => {
					console.log(JSON.stringify(res));
					var sweixin = res.find(i => i.id === 'weixin')
					if (sweixin) {
						// 分享跳转到微信小程序
						sweixin.launchMiniProgram({
							id: "gh_088fa16acaff", // 	关联微信小程序的原始ID（"g_"开头的字符串）
							path: '/pages/index/kefu', //要打开小程序的路径
							type: 0 // 	微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
						}, res => {
							console.log('成功唤起微信小程序');
						}, err => {
							console.log('失败');
						})
					} else {
						// 没有获取到微信分享服务
					}
				}, err => {
					// 获取分享服务列表失败
				});
			},
			handleKfCall(){
				var a = this
				// a.openAuth('CALL_PHONE')
				a.$refs.kfPopup.hide();
				a.openAuthPhoneKf('CALL_PHONE')
			},
			//打开自定义权限目的弹框
			openAuth(permissionID){
				this.permissionID = permissionID;//这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
				setTimeout(()=>{
					this.$refs['authpup'].open();
				},500)
			},
			//用户授权权限后的回调
			changeAuth(){
				var a = this
				//这里是权限通过后执行自己的代码逻辑
				console.log('拨打电话权限已授权，可执行自己的代码逻辑了');
				a.$refs.kfPopup.hide();
				var temp_str = '呼叫'+ a.kf_phone
				uni.showActionSheet({
					itemList: [temp_str],
					success: function(res) {
						console.log(res);
						if (res.tapIndex == 0) {
							uni.makePhoneCall({
								phoneNumber: a.kf_phone,
								success: (res) => {
									console.log('调用成功!')
								},
							})
						}
					}
				})
			},
			handleShowKf(){
				var a = this
				a.$refs.kfPopup.show();
				// a.openAuthPhoneKf('CALL_PHONE')
			},
			//打开自定义权限目的弹框
			openAuthPhoneKf(permissionID){
				this.permissionID = permissionID;//这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
				setTimeout(()=>{
					this.$refs['authpupPhoneKf'].open();
				},500)
			},
			changeAuthPhoneKf(){
				var a = this
				//这里是权限通过后执行自己的代码逻辑
				console.log('拨打电话权限已授权，可执行自己的代码逻辑了');
				var temp_str = '呼叫'+ a.kf_phone
				uni.showActionSheet({
					itemList: [temp_str],
					success: function(res) {
						console.log(res);
						if (res.tapIndex == 0) {
							uni.makePhoneCall({
								phoneNumber: a.kf_phone,
								success: (res) => {
									console.log('调用成功!')
								},
							})
						}
					}
				})
			},
			handleRevoke(){
				var a = this
				uni.showModal({
				    title: '提示',
				    content: '确认要撤销申诉吗',
				    confirmText: "确认",
					cancelText:"取消",
					confirmColor:'#FF6B00',
				    success(res) {
				      if (res.confirm) {
						uni.showLoading({
							title:'加载中'
						})
						a.globalajax('wallet/cancelOrderRefuse',{
							id:a.id
							},'GET',function(res) {
								console.log(res);
								uni.hideLoading()
								uni.stopPullDownRefresh()
								if(res.data.code==200){
									uni.showToast({
										title:'操作成功',
										icon:'none'
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 300)
								}else{
									a.$showModal({
										title:'友情提示',
										content:res.data.msg,
										showCancel:false,
										confirmText:'我知道了',
										success: (res) => {
										}
									});
								}
							}
						);
				      }
				    }
				});
			},
			goOrder(){
				uni.navigateTo({
					url:'/pages/index/orderDetail?id=' + this.info.order.id
				})
			},
			getDetail(){
				var a =this
				uni.showLoading({
					title:'加载中'
				})
				a.globalajax('order/OrderRefuseInfo',{
					id:a.id
					},'GET',function(res) {
						console.log(res);
						uni.hideLoading()
						uni.stopPullDownRefresh()
						if(res.data.code==200){
							var temp_obj = res.data.data
							temp_obj.image_arr = JSON.parse(temp_obj.image)
							a.info = temp_obj
							a.ask_desc =  a.info.remark
						}else{
							a.$showModal({
								title:'友情提示',
								content:res.data.msg,
								showCancel:false,
								confirmText:'我知道了',
								success: (res) => {
								}
							});
						}
					}
				);
			},
			 bindPickerChange: function(e) {
			    this.reason_index = e.detail.value
			},
			customConduct() {
				uni.navigateBack({
					delta: 1
				})
			},
			handleSubmit(){

			},
			imgDelete(e){
				this.image_arr.splice(e.index, 1)
			},
			ceshiUploadSuccess(res) { //上传成功
				var _res = JSON.parse(res.data);
				console.log(_res)
				this.image_arr.push(_res.data.url);
				this.ceshiData.push(_res.data.url);
			},
			conInput(e){
				var temp_value = e.detail.value.slice(0,300)
				if(temp_value.length>=300){
					this.ask_desc_num = 300
					uni.showToast({
					    icon: 'none',
					    title: '最多只能输入300个字符'
					});
				}else{
					this.ask_desc_num = temp_value.length
				}
				this.ask_desc = temp_value
			},
			handleBlur(e){
				var temp_value = e.detail.value.slice(0,300)
				if(temp_value.length>=300){
					this.ask_desc_num = 300
				}else{
					this.ask_desc_num = temp_value.length
				}
				this.ask_desc = temp_value
			},
		}
	}
</script>

<style lang="scss">
page {
		background-color: #f6f6f6;
	}
	.kfPopup_content{
		width: 640rpx;
		height: 364rpx;
		background-image: url('https://www.cccshansong.com/chong_weapp/order_detail_icon5.png');
		background-size: 100% 100%;
		.kf_btn_title{
			text-align: center;
			font-size: 44rpx;
			padding: 36rpx 0;
			font-weight: bold;
		}
		.kf_btn_title1{
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
		}
		.kf_btn_box{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 66rpx;
			.kf_btn1{
				width: 280rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				color: #418AFF;
				font-size: 30rpx;
				border-radius: 16rpx;
				border: 2rpx solid #418AFF;
			}
			.kf_btn2{
				width: 280rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
				font-size: 30rpx;
				border-radius: 16rpx;
				border: 2rpx solid #418AFF;
				background-color: #418AFF;
				position: relative;
				margin-left: 30rpx;
				.leftBox{
					position: absolute;
					top: 0;
					left: 0;
					width: 280rpx;
					height: 80rpx;
					opacity: 0;
				}
			}
		}
	}
	.top_nav_box {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}
	.page_item_bj {
		width: 750rpx;
		height:664rpx;
		background-image: url('../../static/images/png03.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
	.page_content_box{
		width: 750rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index:1;
		.appeal_detail_tip_box{
			margin-top: 30rpx;
			.appeal_detail_tip_title{
				margin-left: 32rpx;
				color: #fff;
				font-weight: bold;
				font-size: 44rpx;
			}
			.appeal_detail_tip_desc{
				padding: 32rpx;
				color: rgba(255, 255, 255, 1);
				font-size: 26rpx;
				padding-top: 8rpx;
				padding-bottom: 2rpx;
			}
		}
		.auth_step_img{
			width: 656rpx;
			height: 104rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			margin-bottom:40rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.appeal_time_box{
			width: 686rpx;
			// height: 152rpx;
			padding-bottom: 24rpx;
			background-color: rgba(255,255,255,0.5);
			margin: 0 auto;
			margin-bottom: 20rpx;
			border-radius: 16rpx;
			.appeal_time_box_item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 26rpx;
				.appeal_time_box_item_left{
					margin-left: 24rpx;
					color: rgba(48, 49, 51, 1);
					font-size: 28rpx;
				}
				.appeal_time_box_item_right{
					margin-right: 24rpx;
					color: rgba(48, 49, 51, 1);
					font-size: 28rpx;
				}
			}
		}
		.appeal_order_box{
			width: 686rpx;
			height: 208rpx;
			background-color: #fff;
			margin: 0 auto;
			margin-bottom: 20rpx;
			border-radius: 16rpx;
			.appeal_order_title{
				padding: 24rpx;
				color: rgba(36, 40, 49, 1);
				font-size: 32rpx;
				font-weight: bold;
			}
			.bond_content_item_order_box{
				margin-top: 6rpx;
				padding-bottom: 20rpx;
				position: relative;
				.bond_content_item_order_img{
					position: absolute;
					right: 20rpx;
					top: 20rpx;
					width: 44rpx;
					height: 44rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.bond_content_item_order_qu{
					display: flex;
					align-items: center;
					.bond_content_item_order_qu_dian{
						width: 12rpx;
						height: 12rpx;
						background-color: #418AFF;
						border-radius: 50%;
						margin-left: 24rpx;
						margin-right: 14rpx;
					}
					.bond_content_item_order_qu_text{
						width: 540rpx;
						white-space: nowrap;
					    text-overflow: ellipsis;
					    overflow: hidden;
					    word-break: break-all;
						color: rgba(96, 98, 102, 1);
						font-size: 28rpx;
					}
				}
				.bond_content_item_order_song{
					display: flex;
					align-items: center;
					padding-top: 10rpx;
					.bond_content_item_order_song_dian{
						width: 12rpx;
						height: 12rpx;
						background-color: rgba(3, 214, 214, 1);
						border-radius: 50%;
						margin-left: 24rpx;
						margin-right: 14rpx;
					}
					.bond_content_item_order_song_text{
						width: 540rpx;
						white-space: nowrap;
					    text-overflow: ellipsis;
					    overflow: hidden;
					    word-break: break-all;
						color: rgba(96, 98, 102, 1);
						font-size: 28rpx;
					}
				}
			}
		}
		.auth_step_info_box{
			width: 686rpx;
			height: 736rpx;
			background-color: rgba(255,255,255,0.5);
			margin: 0 auto;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			.ask_text_box{
				width: 642rpx;
				height:236rpx;
				background: #F5F6F8;
				border-radius:16rpx;
				margin: 0 auto;
				.ask_textarea{
					width: 600rpx;
					height: 160rpx;
					margin: 0 auto;
					padding-top: 20rpx;
					textarea{
						font-size: 28rpx;
						width: 600rpx;
						height: 160rpx;
					}
				}
				.ask_text_num{
					color: #909399;
					font-size: 24rpx;
					text-align: end;
					padding-right: 30rpx;
				}
			}
			.ask_img_box{
				width: 642rpx;
				margin: 0 auto;
				position: relative;
				.ask_img_num{
					position: absolute;
					top: 28rpx;
					right: 30rpx;
					color: #909399;
					font-size: 24rpx;
				}
				.ask_title{
					padding-top: 28rpx;
					font-size: 30rpx;
					color: rgba(48, 49, 51, 1);
				}
				.img_list{
					display: flex;
					width: 642rpx;
					margin: 0 auto;
					margin-top: 10rpx;
					.img_list_item{
						width: 194rpx;
						height: 150rpx;
						margin: 10rpx;
						background-color: #F5F6F8;
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						image{
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}
				}
			}
			.auth_step_info_title{
				height: 96rpx;
				line-height: 96rpx;
				border-bottom: 2rpx solid rgba(255,255,255,0.5);
				margin-bottom: 30rpx;
				text{
					color: rgba(48, 49, 51, 1);
					font-size: 32rpx;
					margin-left: 24rpx;
					font-weight: bold;
				}
			}
			.phone_login_input_box{
				width:638rpx;
				height: 88rpx;
				border-radius: 16rpx;
				background: rgba(255,255,255,0.8);
				margin: 0 auto;
				display: flex;
				margin-bottom: 20rpx;
				.pick_box{
					position: relative;
					font-size: 28rpx;
					width: 434rpx;
					height: 88rpx;
					.pick_img{
						width: 56rpx;
						height: 56rpx;
						margin-left:396rpx;
						image{
							width: 44rpx;
							height: 44rpx;
							margin-top:24rpx;
						}
					}
					.pick_input{
						z-index: 9;
						position: absolute;
						top: 0;
						left: 0;
						width: 434rpx;
						height: 88rpx;
						line-height: 88rpx;
						text-align: left;
						font-size: 30rpx;
					}
					picker{
						z-index: 9;
						position: absolute;
						top: 0;
						left: 0;
						width: 434rpx;
						height: 88rpx;
						.pick_input{
							height: 88rpx;
							line-height: 88rpx;
							text-align: left;
							font-size: 30rpx;
						}
						.pick_input1{
							font-size: 30rpx;
							color: #808080;
						}
					}
				}
				.phone_login_input_name{
					width: 156rpx;
					height: 88rpx;
					padding-left: 24rpx;
					line-height: 88rpx;
					color: #303133;
					font-size: 30rpx;
					font-weight: bold;
					text{
						color: #FF3C26;
					}
				}
				.phone_login_input_inp{
					width: 434rpx;
					height: 88rpx;
					position: relative;
					.reg_form_item_pwd{
						width: 60rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						top: 13rpx;
						right: 12rpx;
						image{
							width: 33rpx;
							height: 33rpx;
						}
					}
					.phone_login_input_code{
						position: absolute;
						top: 13rpx;
						right: 12rpx;
						color: #418AFF;
						font-size: 28rpx;
						z-index: 90;
						width: 190rpx;
						height: 64rpx;
						text-align: center;
						line-height: 64rpx;
						border-radius: 12rpx;
						background-color: rgba(255, 122, 0, 0.1);
					}
					input{
						height: 88rpx;
						line-height: 88rpx;
						font-size: 30rpx;
					}
				}
			}
		}
	}
	.record_fix_box{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9;
		width: 750rpx;
		padding-top: 16rpx;
		box-shadow: 0rpx 0rpx 26rpx 0rpx rgba(0,0,0,0.0800);
		padding-bottom: calc(16rpx +  constant(safe-area-inset-bottom));
		padding-bottom: calc(16rpx +  env(safe-area-inset-bottom));
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.record_fix_btn1{
			width: 210rpx;
			height: 80rpx;
			opacity: 1;
			border-radius: 16rpx;
			border: 2rpx solid  #418AFF;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 30rpx;
			margin-right: 32rpx;
			background-color: #418AFF;
		}
		.record_fix_btn{
			width: 210rpx;
			height: 80rpx;
			opacity: 1;
			border-radius: 16rpx;
			border: 2rpx solid rgba(228, 231, 237, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			color: rgba(36, 40, 49, 1);
			font-size: 30rpx;
			margin-right: 32rpx;
		}
	}
</style>
